<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 带搜索框的导航栏</title>
</head>
<body>
<div class="topnav">
    <a class="active" href="#home">主页</a>
    <a href="#about">关于</a>
    <a href="#contact">联系我们</a>
    <input type="text" placeholder="搜索..">
</div>

<div style="padding-left:16px">
    <h2>响应式搜索菜单</h2>
    <p>导航栏里面有一个搜索框。</p>
    <p>调整浏览器窗口的大小, 查看效果。</p>
</div>
<style>
    *{
        box-sizing: border-box;
    }
    .topnav input{
        float: right;
    }
    @media screen and (max-width: 650px) {
        .topnav a{
            display: block;

        }
        .topnav input{
            display: block;
            float: none;
        }
    }
</style>
</body>
</html>
